<template>
  <div class="mobile-bind">
    <div class="form-group">
      <input class="form-control" placeholder-style="placeholder" v-model="dataForm.username"  placeholder="请输入员工账号">
    </div>
    <div class="form-group">
      <input class="form-control" placeholder-style="placeholder" type="password" v-model="dataForm.password"  placeholder="请输入员工账号密码">
    </div>
    <button class="btn-confirm" @getuserinfo="getUserInfo" open-type="getUserInfo">绑定</button>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        dataForm: {},
      }
    },
    components: {},
    methods: {
      async getUserInfo(result) {
       const userInfo = result.mp.detail.userInfo;
        console.info(this.dataForm)
        if (!this.dataForm.username) {
          wx.showToast({
            title: '请输入员工帐号',
            icon: 'none'
          });
          return false;
        }
        if (!this.dataForm.password) {
          wx.showToast({
            title: '请输入员工帐号密码',
            icon: 'none'
          });
          return false;
        }
        console.info(this.dataForm)
        wx.showLoading({ title: '正在提交...', mask: true });
        const bindResult = await wx.request({
          method: 'POST',
          url: '/emp/login/bind/wxCode',
          data: {
            wxCode: App.wxCode,
            username: this.dataForm.username,
            password: this.dataForm.password,
            avatarUrl: userInfo.avatarUrl,
            nickName: userInfo.nickName,
          }
        })
        wx.hideLoading();
        if (bindResult.code === 200) {
          App.loginInfo = result.data;
          wx.showModal({
            content: '绑定成功',
            showCancel: false,
            success: result => {
              if(result.confirm){
                wx.navigateBack();
              }
            }
          });
        } else {
          wx.showToast({
            title: bindResult.message || '绑定失败',
            icon: 'none'
          });
        }
      }
    },
    async mounted() {

    },
  }
</script>

<style lang="scss">
  @import "../../styles/base";

  .mobile-bind {
    padding-top: pxToRem(100);
    .form-group {
      position: relative;
      margin-top: pxToRem(60);
      padding-left: pxToRem(75);
      padding-right: pxToRem(75);
      .form-control {
        padding: 0 pxToRem(20);
        height: pxToRem(68);
        line-height: pxToRem(68);
        font-size: pxToRem(28);
        border-bottom: pxToRem(1) solid $border;
      }
    }
    .verify-wrap {
      display: flex;
      align-items: center;
      .form-control {
        width: pxToRem(380);
        margin-right: pxToRem(65);
      }
      .btn-send {
        width: pxToRem(180);
        height: pxToRem(68);
        line-height: pxToRem(68);
        border: pxToRem(1) solid $main-color;
        color: $main-color;
        font-size: pxToRem(28);
        text-align: center;
      }
    }
    .protocol-wrap {
      display: flex;
      align-items: center;
      padding-left: pxToRem(30);
      margin-top: pxToRem(60);
      .protocol-icon {
        margin-right: pxToRem(10);
        width: pxToRem(29);
        height: pxToRem(29);
      }
      .protocol {
        font-size: pxToRem(24);
        color: $extra-black;
      }
    }
    .placeholder {
      color: $extra-black;
    }
    .btn-confirm {
      display: block;
      margin: pxToRem(150) auto;
      width: pxToRem(600);
      height: pxToRem(80);
      line-height: pxToRem(80);
      text-align: center;
      background-color: $main-color;
      color: #fff;
      font-size: pxToRem(32);
      border-radius: pxToRem(8);
    }
  }
</style>
